<template>
  <view class="detail-root">
    <view v-if="activity" class="info">
      <p class="title">{{ activity.title }}</p>
      <p class="time">发布时间：{{ formatTime(activity.releaseTime) }}</p>
      <p class="status">状态：
        <span :style="{ color: statusColor(activity.status) }">{{ statusText(activity.status) }}</span>
      </p>
      <p class="content">内容：{{ activity.content }}</p>

      <!-- **图片展示** -->
      <view class="image-list" v-if="images.length">
        <image v-for="img in images" :key="img.image_id" :src="img.imageUrl" class="activity-image" mode="widthFix"></image>
      </view>
    </view>
    
    <view v-else class="loading">加载中...</view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { getToken } from '@/utils/auth';
import { onLoad } from '@dcloudio/uni-app';

const activity = ref(null);  // 活动详情
const images = ref([]);      // 图片列表
const activityId = ref(null); 

// **格式化时间**
const formatTime = (time) => {
  if (!time) return '-';
  const date = new Date(time);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// **获取状态文本**
const statusText = (status) => {
  switch (status) {
    case 2: return '审核通过';
    case 1: return '审核中';
    case 3: return '审核失败';
    default: return '未知状态';
  }
};

// **获取状态颜色**
const statusColor = (status) => {
  switch (status) {
    case 2: return 'forestgreen';
    case 1: return 'orangered';
    case 3: return 'red';
    default: return 'black';
  }
};

// **加载活动详情**
const loadActivityDetail = () => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/activities/details/${activityId.value}`,
    method: 'GET',
    header: { 'Authorization': token },
    success: (response) => {
      if (response.data.code === 200) {
        activity.value = response.data.data;
        if (activity.value.imageId) {
          loadImages(activity.value.imageId);  // **获取图片**
        }
      } else {
        uni.showToast({ title: response.data.msg, icon: 'none' });
      }
    },
    fail: () => {
      uni.showToast({ title: '加载失败，请重试', icon: 'none' });
    }
  });
};

// **加载图片信息**
const loadImages = (imageId) => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/images/getImages/${imageId}`,
    method: 'GET',
    header: { 'Authorization': token },
    success: (response) => {
      if (response.data.code === 200) {
        images.value = response.data.data || [];
		console.log(response.data.data);
		console.log(images.value)
      } else {
        uni.showToast({ title: response.data.msg, icon: 'none' });
      }
    },
    fail: () => {
      uni.showToast({ title: '图片加载失败', icon: 'none' });
    }
  });
};

// **页面加载时获取参数**
onLoad((options) => {
  activityId.value = options.activityId;
  loadActivityDetail();
});
</script>
<style>
.detail-root {
  padding: 15px;
}

.info {
  background: white;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.time, .status, .content {
  margin-top: 10px;
  font-size: 14px;
}

/* 图片列表 */
.image-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.activity-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}

.loading {
  text-align: center;
  margin-top: 50px;
  font-size: 16px;
  color: gray;
}
</style>
